<template>
	<view :style="theme" class="content">
		<view class="box_config">
			<view class="left">
				<u-tabs :list="tabList" lineHeight="1" :scrollable="false"
					:activeStyle="{fontWeight: 'bolder',fontSize: '28rpx',color: '#222222'}"
					:inactiveStyle="{fontSize: '28rpx'}" @click="tabclick" :current="active"></u-tabs>
			</view>
			<view class="sxBtn" @click="showPop=true">
				<image :src="imgHost+'/ic_shaixuan.png'" mode="widthFix"></image>筛选
			</view>
		</view>
		<u-popup :show="showPop" round mode="bottom">
			<view class="popcnt">
				<view class="popBt">
					筛选
					<u-icon name="close" @click="showPop =false"
						custom-style="position: absolute;right: 30rpx;top: 10rpx" size="40rpx" color="#999" />
				</view>
				<view class="sxBt">
					下单时间
				</view>
				<view class="flex sxUl">
					<view v-for="(item, index) in timeKjlist" :key="index"
						:class="item.time[0] == date[0] && item.time[1] == date[1]?'on':''" @click="timeClick(item)">
						{{ item.name }}
					</view>
				</view>
				<view class="sxBt">
					自定义
				</view>
				<view class="timeHead flex" @click="onDisplay">
					<text>{{ date[0] || '开始日期' }}</text>
					-
					<text>{{ date[1] || '结束日期'}} </text>
				</view>
				<view class="sxBt">
					订单来源
				</view>
				<view class="flex sxUl">
					<view v-for="(item, index) in lyList" :key="index" :class="szLy.indexOf(item.value) > -1?'on':''"
						@click="szlyBtn(item)">
						{{ item.name }}
					</view>
				</view>
				<view class="sxBt">
					订单类型
				</view>
				<view class="flex sxUl">
					<view v-for="(item, index) in lxList" :key="index"
						:class="szLx.indexOf(item.id) > -1?'on mb3':'mb3'" @click="szBtn(item)">{{ item.name }}</view>
				</view>
				<view class="flex flex_between">
					<view class="czBtn" @click="czBtn">重置</view>
					<view class="tjBtn" @click="jumSearch">确认</view>
				</view>
				
			</view>
		</u-popup>
		<view v-for="(item, index) in list" :key="index" class="orderLi">
			<view class="head flex flex_between" @click="jumpdesc(item)">
				<view class="left">
					<image v-if="item.venueName" :src="imgHost+'/ic_changguan.png'" mode="widthFix" class="locationImg"></image>
					{{item.venueName || ''}}
				</view>
				<view class="right" :class="item.payStatus == 0?'ztColor':''">
					{{item.moduleInfo &&item.moduleInfo.logisticStatusName&& item.payStatus != 5?item.moduleInfo.logisticStatusName:item.payStatus == 0?'待支付':item.payStatus == 1?'超时未支付':item.payStatus == 2?'取消支付':item.payStatus == 3?'支付成功':'退款成功'}}
				</view>
			</view>
			<view v-if="item.moduleInfo && item.moduleInfo.detailList && item.moduleInfo.detailList.length > 0" class="orderDetail" @click="jumpdesc(item)">
				<block v-if="(item.orderType != '12' && item.orderType != '06') || (item.moduleInfo.detailList.length < 4)">
					<view v-for="(em, ss) in item.moduleInfo.detailList" :key="ss" class="detail flex">
						<image v-if="em.imgUrl" :src="em.imgUrl" class="left" @click="previewImg(em.imgUrl)"></image>
						<image v-else-if="item.orderType=='11'" :src="imgHost+'/default_duibi.png'" class="left"></image>
						<image v-else-if="item.orderType=='18'" :src="imgHost+'/default_hire_b.png'" class="left"></image>
						<image v-else-if="item.orderType=='13'" :src="imgHost+'/default_shunjian.png'" class="left"></image>
						<image v-else-if="item.orderType=='05'" :src="imgHost+'/default_kaika.png'" class="left"></image>
						<image v-else-if="item.orderType=='04' || item.orderType=='03'" :src="imgHost+'/default_ticket.png'" class="left"></image>
						<image v-else-if="item.orderType=='01'" :src="imgHost+'/default_chongzhi.png'" class="left"></image>
						<image v-else-if="item.orderType=='20'" :src="imgHost+'/default_shouxufei.png'" class="left"></image>
						<image v-else :src="imgHost+'/default_tongyong.png'" class="left"></image>
						<view class="right">
							<view class="name flex flex_between">
								<text class="limit-1-line">{{em.name}}</text>
								<text v-if="em.price || em.price == 0">¥{{em.price}}</text>
							</view>
							<view class="time flex flex_between">
								<text v-if="em.skuInfo" class="limit-1-line">{{item.orderType == '11'?'设备：':item.orderType == '05'?'开卡等级：':item.orderType == '18'?'收费标准：':item.orderType=='19'?'':'规格：'}}{{em.skuInfo}}</text>
								<text v-else-if="em.useTime" class="limit-1-line">{{item.orderType == '08'?'活动时间':item.orderType == '07'?'课程时间':item.orderType == '04'?'有效期':'适用时间'}}：{{em.useTime}}</text>
								<text v-else-if="em.useItem" class="limit-1-line">{{item.orderType == '03'?'适应项目：':item.orderType=='19'?'适用项目：':''}}{{em.useItem}}</text>
								<text v-else class="limit-1-line"></text>
								<text v-if="em.num">x{{em.num}}</text>
							</view>
						</view>
					</view>
				</block>
				<view v-else class="hdDetail flex">
					<scroll-view scroll-x class="left">
						<image v-for="(em, ss) in item.moduleInfo.detailList" :key="ss" :src="em.imgUrl"></image>
					</scroll-view>
					<view class="right">
						<view class="price">
							¥{{item.realPrice || item.realPrice === 0?item.realPrice:item.originalPrice}}
						</view>
						<view class="num">
							共{{item.moduleInfo.detailList.length}}件
						</view>
					</view>
				</view>
			</view>
			<view class="orderFoot flex flex_between">
				<view class="left" @click="jumpdesc(item)">
					<block v-if="item.payStatus!='1' && item.payStatus!='2'">
						{{item.payStatus == 2 || item.payStatus == 0|| item.payStatus == 1?'需付款：':'实付款：'}}

						<text>¥{{item.realPrice || item.realPrice === 0?item.realPrice:item.originalPrice}}</text>
					</block>
				</view>
				<view v-if="item.orderType == '02' || item.orderType == '03'|| item.orderType == '04'|| item.orderType == '06'|| item.orderType == '07' || item.orderType == '20'|| item.orderType == '08'|| item.orderType == '11'|| item.orderType == '12'|| item.orderType == '13' || item.orderType == '18'|| item.orderType == '19'" class="right flex">
					<view v-if="item.payStatus == 0" @click="DCdk(item)">取消订单</view>
					<view v-if="item.payStatus == 0 && item.orderType != '12'" class="on" @click="continueToPay(item)">继续支付</view>
					<view v-if="item.payStatus == 3 && ((item.orderType == '02' || item.orderType == '03'||(item.orderType == '06'&& item.moduleInfo && (item.moduleInfo.logisticStatus === '3' || item.moduleInfo.logisticStatus === '4')) ||item.orderType == '19'|| item.orderType == '04'|| item.orderType == '08' || (item.orderType == '07' && item.moduleInfo.courseFlag == '2')))" @click="CDTD(item)">申请退款</view>
					<view v-if="(item.payStatus == 1 || item.payStatus == 2 || item.payStatus == 5) && (item.orderType == '02' || item.orderType == '03'|| item.orderType == '04'|| item.orderType == '13')" @click="deleBtn(item)">删除订单</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据</view>
		</view>
		<u-calendar :defaultDate="defaultDateMultiple" monthNum="4" :color="color" :minDate="minDate" :maxDate="maxDate"
			allowSameDay :show="show" confirmDisabledText="请选择起始日期和结束日期" mode="range" @confirm="confirmBtn"
			@close="closeBtn"></u-calendar>
		<!-- 删除订单弹框 -->
		<u-overlay :show="showDel">
			<view class="wrapper">
				<view class="block">
					<view class="block_title">提示</view>
					<view class="block_info">是否确定删除此订单</view>
					<view class="block_footer">
						<view class="block_footer_a" @click="onClickHide">取消</view>
						<view class="block_footer_b" @click="$noMultipleClicks(submitdele)">确定</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- 取消订单弹框 -->
		<u-overlay :show="shows">
			<view class="wrapper">
				<view class="block">
					<view class="block_title">提示</view>
					<view class="block_info">是否取消此订单</view>
					<view class="block_footer">
						<view class="block_footer_a" @click="DCqx">取消</view>
						<view class="block_footer_b" @click="$noMultipleClicks(bookingCancellation)">确定</view>
					</view>
				</view> 
			</view>
		</u-overlay>
		<u-overlay :show="TDOPEN">
			<view class="wrapper">
				<view class="block">
					<view class="block_title">提示</view>
					<view class="block_info">是否申请退款此订单</view>
					<view class="block_footer">
						<view class="block_footer_a" @click="DCclose">取消</view>
						<view class="block_footer_b" @click="$noMultipleClicks(TDsubmit)">确定</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<!-- 列表 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				color: `var(--color)`,
				showPop: false,
				minDate: this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 90),
				maxDate: this.$app.firstQueryTime().slice(0, 10),
				defaultDateMultiple: [this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 6), this.$app
					.firstQueryTime().slice(
						0, 10)
				],
				show: false,
				list: [],
				page: 1,
				end: false,
				firstQueryTime: '',
				status: 'nomore',
				timeKjlist: [{
					name: '近7天',
					time: [this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 6), this.$app
						.firstQueryTime()
						.slice(0, 10)
					]
				}, {
					name: '近30天',
					time: [this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 29), this.$app
						.firstQueryTime()
						.slice(0, 10)
					]
				}, {
					name: '近90天',
					time: [this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 89), this.$app
						.firstQueryTime()
						.slice(0, 10)
					]
				}],
				lyList: [{
					name: '小程序端',
					value: '01'
				}, {
					name: '场馆PC端',
					value: '02'
				}],
				lxList: [],
				szLx: [],
				szLy: [],
				date: [],
				tabList: [{
					name: "全部",
					value: '',
					triggered: false,
				}, {
					name: "待付款",
					value: '0',
					triggered: false,
				}, {
					name: "已支付",
					value: '3',
					triggered: false,
				}, {
					name: "已取消",
					value: '2',
					triggered: false,
				}, {
					name: "已退款",
					value: '5',
					triggered: false,
				}],
				active: 0,
				ddid: '',
				orderType: '',
				shows: false, //取消订单弹框
				TDOPEN: false, //退订显示隐藏
				showDel: false, //删除订单弹框
			}
		},
		onLoad(options) {
			this.active = options.type || 0
			this.getLxList()
		},
		onShow() {
			this.reset()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			//单张图片预览
			previewImg(imgurl) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = imgurl
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			czBtn() {
				this.szLx = []
				this.szLy = []
				this.date = []
				this.jumSearch()
			},
			jumpdesc(e) {
				// if (this.active == 0 || this.active == 1 || this.active == 2 || this.active == 4) {
					
				// } else if (this.active == 3) {
				// 	if (e.courseFlag == 1) {
				// 		this.jump('/pages/curriculum/detailb?id=', e.courseId)
				// 	} else {
				// 		this.jump('/pages/curriculum/orderDetail?id=', e.orderId)
				// 	}
				// }
				this.jump('/pages/order/detail?orderType=', e.orderType + '&id=' + e.businessId + '&orderId=' + e.orderId)
			},
			DCdk(e) {
				this.shows = true
				this.orderType = e.orderType
				if (this.orderType == '02') {
					this.ddid = e.businessId
				} else {
					this.ddid = e.orderId
				}
			},
			DCqx() {
				this.shows = false
			},
			DCclose() {
				this.TDOPEN = false
			},
			// 退款
			CDTD(e) {
				this.TDOPEN = true
				this.orderType = e.orderType
				if (this.orderType == '02') {
					this.ddid = e.businessId
				} else {
					this.ddid = e.orderId
				}
			},
			TDsubmit() {
				// 订场 02  课程 07 门票 03 套餐 04 商品 06 点餐 12 活动 08
				if (this.orderType == '02') {
					this.$app.ajax({
						api: this.$api.sessionEstimation(),
						data: {
							userId: this.userInfo.id,
							param: {
								reserveAndOrderId: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.TDOPEN = false
							this.$app.showToast('退款成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '03') {
					this.$app.ajax({
						api: this.$api.ticketRefund(),
						data: {
							userId: this.userInfo.id,
							param: {
								id: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.TDOPEN = false
							this.$app.showToast('退款成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '04') {
					this.$app.ajax({
						api: this.$api.mealsOnlineOrderPay(),
						data: {
							userId: this.userInfo.id,
							param: {
								id: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.TDOPEN = false
							this.$app.showToast('退款成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '07') {
					this.$app.ajax({
						api: this.$api.noEnrollCourse(),
						data: {
							userId: this.userInfo.id,
							param: {
								orderId: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.TDOPEN = false
							this.$app.showToast('退款成功')
							this.reset()
						}
					}).catch(() => {})
				}  else if (this.orderType == '08') {
					this.$app.ajax({
						api: this.$api.activityCancelOrderMini(),
						data: {
							userId: this.userInfo.id,
							param: {
								orderId: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.TDOPEN = false
							this.$app.showToast('退款成功')
							this.reset()
						}
					}).catch(() => {})
				}  else if (this.orderType == '19') {
					this.$app.ajax({
						api: this.$api.specialCardOrderRefundByMp(),
						data: {
							userId: this.userInfo.id,
							param: {
								orderId: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.TDOPEN = false
							this.$app.showToast('退款成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '06') {
					this.$app.ajax({
						api: this.$api.goodsListTk(),
						data: {
							userId: this.userInfo.id,
							param: {
								orderId: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.TDOPEN = false
							this.$app.showToast('退款成功')
							this.reset()
						}
					}).catch(() => {})
				}
			},
			bookingCancellation() {
				// 订场 02  课程 07 门票 03 套餐 04 商品 06 点餐 12 活动 08
				if (this.orderType == '02') {
					this.$app.ajax({
						api: this.$api.bookingCancellation(),
						data: {
							userId: this.userInfo.id,
							param: {
								reserveAndOrderId: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.shows = false
							this.$app.showToast('取消成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '03') {
					this.$app.ajax({
						api: this.$api.cancelTicketOrder(),
						data: {
							userId: this.userInfo.id,
							param: {
								id: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.shows = false
							this.$app.showToast('取消成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '20') {
					this.$app.ajax({
						api: this.$api.serviceOrderCancelPayByMp(),
						data: {
							userId: this.userInfo.id,
							param: {
								orderId: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.shows = false
							this.$app.showToast('取消成功')
							this.reset()
						}
					}).catch(() => {})
				}  else if (this.orderType == '04') {
					this.$app.ajax({
						api: this.$api.mealsOnlionCanlPay(),
						data: {
							userId: this.userInfo.id,
							param: {
								id: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.shows = false
							this.$app.showToast('取消成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '07') {
					this.$app.ajax({
						api: this.$api.noEnrollCourse(),
						data: {
							userId: this.userInfo.id,
							param: {
								orderId: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.shows = false
							this.$app.showToast('取消成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '06' || this.orderType == '12') {
					this.$app.ajax({
						api: this.$api.goodsQxzf(),
						data: {
							userId: this.userInfo.id,
							param: {
								id: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.shows = false
							this.$app.showToast('取消成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '13') {
					this.$app.ajax({
						api: this.$api.cancelJcOrder(),
						data: {
							userId: this.userInfo.id,
							param: {
								id: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.shows = false
							this.$app.showToast('取消成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '18') {
					// 器材
					this.$app.ajax({
						api: this.$api.equipmentLeaseCancelPay(),
						data: {
							userId: this.userInfo.id,
							param: {
								orderId: this.ddid,
								flag: '1'
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.shows = false
							this.$app.showToast('取消成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '19') {
					// 器材
					this.$app.ajax({
						api: this.$api.specialCardOrderCancelPayByMp(),
						data: {
							userId: this.userInfo.id,
							param: {
								orderId: this.ddid,
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.shows = false
							this.$app.showToast('取消成功')
							this.reset()
						}
					}).catch(() => {})
				}
			},
			// 删除订单
			deleBtn(e) {
				this.showDel = true
				this.orderType = e.orderType
				if (this.orderType == '02') {
					this.ddid = e.businessId
				} else {
					this.ddid = e.orderId
				}
			},
			onClickHide() {
				this.showDel = false
			},
			// 删除订场订单
			submitdele() {
				// 订场 02  课程 07 门票 03 套餐 04 商品 06 点餐 12 活动 08  专项卡 19
				if (this.orderType == '02') {
					this.$app.ajax({
						api: this.$api.deleBooking(),
						data: {
							userId: this.userInfo.id,
							param: {
								reserveAndOrderId: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.showDel = false
							this.$app.showToast('删除成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '03') {
					this.$app.ajax({
						api: this.$api.ticketDeletion(),
						data: {
							userId: this.userInfo.id,
							param: {
								id: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.showDel = false
							this.$app.showToast('删除成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '04') {
					this.$app.ajax({
						api: this.$api.mealsDelOrderPay(),
						data: {
							userId: this.userInfo.id,
							param: {
								id: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.showDel = false
							this.$app.showToast('删除成功')
							this.reset()
						}
					}).catch(() => {})
				} else if (this.orderType == '13') {
					this.$app.ajax({
						api: this.$api.delJcOrder(),
						data: {
							userId: this.userInfo.id,
							param: {
								id: this.ddid
							}
						}
					}).then((res) => {
						if (res.errorCode === '000000') {
							this.showDel = false
							this.$app.showToast('删除成功')
							this.reset()
						}
					}).catch(() => {})
				}
			},
			// 继续支付订场
			continueToPay(e) {
				if (e.orderType == '02') {
					// 订场  businessId 
					this.jump('/pages/order/pay?type=1&payOrder=1&businessId=', e.businessId + '&orderId=' +e.orderId)
				} else if (e.orderType == '07') {
					//  课程
					this.jump('/pages/order/pay?type=2&payOrder=1&orderId=', e.orderId)
				} else if (e.orderType == '03') {
					// 门票
					this.jump('/pages/order/pay?type=3&payOrder=1&orderId=', e.orderId)
				} else if (e.orderType == '04') {
					// 套餐
					this.jump('/pages/order/pay?type=4&payOrder=1&orderId=', e.orderId)
				} else if (e.orderType == '12') {
					// 点餐
					this.jump('/pages/order/pay?type=12&payOrder=1&orderId=', e.orderId)
				} else if (e.orderType == '06') {
					// /商品 
					this.jump('/pages/order/pay?type=6&payOrder=1&orderId=', e.orderId)
				} else if (e.orderType == '11') {
					// 兑换游戏币
					this.jump('/pages/order/pay?type=8&payOrder=1&orderId=', e.orderId)
				} else if (e.orderType == '08') {
					// 活动 08
					this.jump('/pages/order/pay?type=6&payOrder=1&orderId=', e.orderId)
				} else if (e.orderType == '13') {
					// 精彩 13
					this.jump('/pages/order/pay?type=13&payOrder=1&orderId=', e.orderId)
				} else if (e.orderType == '18') {
					// 器材 18
					this.jump('/pages/order/pay?type=18&payOrder=1&orderId=', e.orderId)
				} else if (e.orderType == '19') {
					// 专项卡 19
					this.jump('/pages/order/pay?type=19&payOrder=1&orderId=', e.orderId)
				} else {
					this.jump('/pages/order/pay?type=' + e.orderType + '&payOrder=1&orderId=', e.orderId)
				}
			},
			tabclick(e) {
				this.active = e.index;
				this.reset()
			},
			timeClick(e) {
				this.date = e.time
				this.defaultDateMultiple = e.time
			},
			szBtn(item) {
				let arr = [...this.szLx]
				var index = arr.indexOf(item.id)
				if (index > -1) {
					arr.splice(index, 1);
				} else {
					arr.push(item.id)
				}
				this.szLx = arr
			},
			szlyBtn(item) {
				let arr = [...this.szLy]
				var index = arr.indexOf(item.value)
				if (index > -1) {
					arr.splice(index, 1);
				} else {
					arr.push(item.value)
				}
				this.szLy = arr
			},
			getLxList() {
				this.$app
					.ajax({
						data: {
							param: {
								venueId: this.venueId,
								type: "ORDER_TYPE_WX_LIST_QUERY"
							}
						},
						api: this.$api.getOrderType()
					})
					.then(res => {
						if (res.errorCode != '000000') return;
						this.lxList = res.recordList || []
					});

			},
			confirmBtn(e) {
				this.show = false
				this.date = [e[0], e[e.length - 1]]
			},
			onDisplay() {
				this.show = true
			},
			closeBtn() {
				this.show = false
			},
			formatDate(date) {
				var date = new Date(date)
				const year = date.getFullYear() + '-'
				const month = this.calculation(date.getMonth() + 1) + '-'
				const day = this.calculation(date.getDate())
				return year + month + day
			},
			calculation(s) {
				return s < 10 ? '0' + s : s
			},
			jumSearch() {
				this.showPop = false
				this.reset()
			},
			reset() {
				this.list = [];
				this.page = 1;
				this.firstQueryTime = this.$app.firstQueryTime()
				this.end = false;
				this.getList()
			},
			getList() {
				let date = this.date
				let startTime = ''
				let endTime = ''
				if (date.length > 0) {
					startTime  = date[0] + ' 00:00:00'
					if (date.length > 1) {
						endTime = date[1] + ' 23:59:59'
					}
				}
				if (this.page == 1) {
					this.firstQueryTime = this.$app.firstQueryTime()
				}
				let orderChannel = [...this.szLy]
				let orderType = [...this.szLx]
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.firstQueryTime,
							page: this.page,
							rows: 10
						},
						param: {
							orderChannel: orderChannel.join(),
							orderType: orderType.join(),
							orderStatus: this.tabList[this.active].value,
							startTime,
							endTime
						}
					},
					api: this.$api.myOrderList()
				}).then((res) => {
					uni.stopPullDownRefresh()
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
					}
				}).catch(() => {
					uni.stopPullDownRefresh()
				})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			},
			onPullDownRefresh() {
				this.reset()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.box_config {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		margin-bottom: 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left {
			flex: 1;
		}
		.sxBtn {
			width: 110rpx;
			flex: none;
			image {
				width: 28rpx;
				height: 28rpx;
				vertical-align: middle;
				margin-right: 8rpx;
			}
		}

		// .head {
		// 	background-color: #fff;
		// 	padding: 30rpx;
		// 	box-sizing: border-box;

			
		// }
	}


	.popcnt {
		padding: 30rpx;
		box-sizing: border-box;
		max-height: 100vh;
		overflow-y: auto;

		.popBt {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bolder;
			position: relative;
			color: #222222;
			text-align: center;
			padding: 10rpx 0 40rpx;
		}

		.sxBt {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			margin: 30rpx 0;
		}

		.sxUl {
			flex-wrap: wrap;

			view {
				width: 154.5rpx;
				line-height: 64rpx;
				background: $bjColor;
				color: #333333;
				border-radius: 36rpx;
				text-align: center;
				margin-right: 24rpx;
				font-size: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* autoprefixer: off */
				-webkit-box-orient: vertical;
				/* autoprefixer: on */

				&:nth-child(4n) {
					margin-right: 0;
				}

				&.on {
					background: $color;
					color: #fff;
				}
			}
		}

		.timeHead {
			width: 512rpx;
			line-height: 64rpx;
			background: bjColor;
			border-radius: 36rpx;
			border: 1px solid #E5E5E5;
			box-sizing: border-box;
			background: $bjColor;

			text {
				flex: 1;
				text-align: center;
			}
		}
		.czBtn {
			color: #666666;
			width: 335rpx;
			line-height: 88rpx;
			background: $bjColor;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			text-align: center;
			margin-top: 30rpx;
		}

		.tjBtn {
			width: 335rpx;
			line-height: 88rpx;
			background: $color;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			text-align: center;
			margin-top: 30rpx;
		}
	}

	.orderLi {
		width: 690rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto 20rpx;

		.head {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}

			.right {
				font-size: 26rpx;

				&.hui {
					color: #666666;
				}
			}
		}

		.orderDetail {
			.detail {
				margin-top: 30rpx;

				.left {
					width: 88rpx;
					height: 88rpx;
					border-radius: 8rpx;
					margin-right: 24rpx;
					flex: none;
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #222222;
					}

					.time {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}

		.orderFoot {
			margin-top: 40rpx;

			.left {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				flex: none;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #222222;
					margin-left: 5rpx;
				}
			}

			.right {
				justify-content: flex-end;

				view {
					width: 168rpx;
					border-radius: 34rpx;
					border: 1rpx solid #B2B2B2;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					text-align: center;
					line-height: 64rpx;
					margin-left: 20rpx;

					&:first-of-type {
						margin-left: 0;
					}

					&.on {
						border-color: $color;
						color: $color;
					}
				}
			}
		}
	}

	.hdDetail {
		margin-top: 30rpx;

		.left {
			white-space: nowrap;
			display: flex;
			width: calc(100% - 115rpx);

			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 8rpx;
				border: 1rpx solid #E5E5E5;
				box-sizing: border-box;
				margin-right: 16rpx;

				&:last-of-type {
					margin-right: 16rpx;
				}
			}
		}

		.right {
			width: 115rpx;
			height: 88rpx;
			text-align: right;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			line-height: 1.5;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;

			.price {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
			}
		}
	}
</style>